<template>
	<view class="container">

		<view class="bigmore">
			<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
				activeColor="black"></uni-segmented-control>
		</view>

		<view class="f2">
			<view class="list" v-show="current == 0">
				<view class="content" v-if="contract.length != 0">
					<view class="lisitem" v-for="(item,index) in contract" :key="index">
						<text class="time">2023年01月16日</text>
						<text class="states" v-if="item.orderStatus==0">待付款</text>
						<text class="states" v-if="item.orderStatus==1">待发货</text>
						<text class="states" v-if="item.orderStatus==2">已发货</text>
						<text class="states" v-if="item.orderStatus==3">已签收</text>
						<view class="center">
							<image class="img" :src="item.xhtp" mode=""></image>
							<view class="title">{{item.xhmc}}</view>
							<view class="price">
								<view>￥{{item.xhyjjg}}</view>
								<view>共1件</view>
							</view>
						</view>
						<view class="button">
							<view class="pay" v-if="item.orderStatus==0">去支付</view>
							<view class="pay" v-if="item.orderStatus==1" @click="look">查看物流</view>
							<view class="pay" v-if="item.orderStatus==2" @click="look">查看物流</view>
							<view class="pay" v-if="item.orderStatus==3" @click="GoComment(item.goodsBh)">评价</view>
						</view>
					</view>
				</view>
				<view class="none" v-else>还没有任何订单呢</view>
			</view>
			<view class="list" v-show="current == 1">
				<view class="content" v-if="contract.length != 0">
					<view class="lisitem" v-for="(item,index) in contract" :key="index">
						<text class="time">2023年01月16日</text>
						<text class="states">待付款</text>
						<view class="center">
							<image class="img" :src="item.xhtp" mode=""></image>
							<view class="title">{{item.xhmc}}</view>
							<view class="price">
								<view>￥{{item.xhyjjg}}</view>
								<view>共1件</view>
							</view>
						</view>
						<view class="button">
							<view class="pay">去支付</view>
						</view>
					</view>
				</view>
				<view class="none" v-else>还没有任何订单呢</view>
			</view>
			<view class="list" v-show="current == 2">
				<view class="content" v-if="contract.length != 0">
					<view class="lisitem" v-for="(item,index) in contract" :key="index">
						<text class="time">2023年01月16日</text>
						<text class="states">待发货</text>
						<view class="center">
							<image class="img" :src="item.xhtp" mode=""></image>
							<view class="title">{{item.xhmc}}</view>
							<view class="price">
								<view>￥{{item.xhyjjg}}</view>
								<view>共1件</view>
							</view>
						</view>
						<view class="button">
							<view class="pay" @click="look">查看物流</view>
						</view>
					</view>
				</view>
				<view class="none" v-else>还没有任何订单呢</view>
			</view>
			<view class="list" v-show="current == 3">
				<view class="content" v-if="contract.length != 0">
					<view class="lisitem" v-for="(item,index) in contract" :key="index">
						<text class="time">2023年01月16日</text>
						<text class="states">已发货</text>
						<view class="center">
							<image class="img" :src="item.xhtp" mode=""></image>
							<view class="title">{{item.xhmc}}</view>
							<view class="price">
								<view>￥{{item.xhyjjg}}</view>
								<view>共1件</view>
							</view>
						</view>
						<view class="button">
							<view class="pay" @click="look">查看物流</view>
						</view>
					</view>
				</view>
				<view class="none" v-else>还没有任何订单呢</view>
			</view>
			<view class="list" v-show="current == 4">
				<view class="content" v-if="contract.length != 0">
					<view class="lisitem" v-for="(item,index) in contract" :key="index">
						<text class="time">2023年01月16日</text>
						<text class="states">已签收</text>
						<view class="center">
							<image class="img" :src="item.xhtp" mode=""></image>
							<view class="title">{{item.xhmc}}</view>
							<view class="price">
								<view>￥{{item.xhyjjg}}</view>
								<view>共1件</view>
							</view>
						</view>
						<view class="button" @click="GoComment(item.goodsBh)">
							<view class="pay">评价</view>
						</view>
					</view>
				</view>
				<view class="none" v-else>还没有任何订单呢</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items: ['全部', '待付款', '待发货', '已发货', '已签收'],
				current: 0,
				contract: [], //选项卡里面的数据
				token: '',
				page: '',
				currentIndex: 0,
				pageSize: 10,
				n: 1,
				orderSn: '',
				newmescript: '',
				orderId: '',
				type: 2,
				typesH: "全部"

			}
		},
		onPullDownRefresh() {
			this.contract = []
			this.n = 1
			//调用获取数据方法
			if (this.currentIndex == 0) {
				this.currentIndex = 0
				this.datalist()
			} else if (this.currentIndex == 1) {
				this.currentIndex = 1
				this.datalist()
			} else if (this.currentIndex == 2) {
				this.currentIndex = 2
				this.datalist()
			} else {
				this.currentIndex = 3
				this.datalist()
			}
			//结束下拉刷新
			uni.stopPullDownRefresh();
		},
		onReachBottom() {
			if (this.page.hasNextPage && this.currentIndex == 0) {
				this.currentIndex = 0
				this.n++
				this.datalist()
			} else if (this.page.hasNextPage && this.currentIndex == 1) {
				this.currentIndex = 1
				this.n++
				this.datalist()
			} else if (this.page.hasNextPage && this.currentIndex == 2) {
				this.currentIndex = 2
				this.n++
				this.datalist()
			} else if (this.page.hasNextPage && this.currentIndex == 3) {
				this.currentIndex = 3
				this.n++
				this.datalist()
			} else {
				uni.showToast({
					title: '没有更多订单了',
					icon: 'none',
					duration: 2000
				})

			}
		},
		onShow() {

			var bs = uni.getStorageSync('UserInformation')
			this.token = bs.usertoken
			this.getData()
		},
		methods: {
			look(){
				uni.showToast({
					title:'此功能暂未开放，敬请期待！',
					icon:'none'
				})
			},
			GoComment(bh) {
				uni.navigateTo({
					url: '/pages-me/addComments/addComments?bh=' + bh
				})
			},

			getData() {
				uni.showLoading({
					title: '加载中'
				});

				var th = this
				this.requestfs({
					url: '/mall/order/selectOrderAll?type=' + this.typesH,
					Authorization: this.token,
				}).then(res => {
					console.log('res:', res)
					if (res.data.code == 200) {
						// if (res.data.data.isFirstPage) {
						th.contract = res.data.data
						// } else {
						// 	th.newmescript = res.data.data
						// 	th.contract = [...th.contract, ...th.newmescript]
						// }
						uni.hideLoading();
						// th.page = res.data.data
						// uni.stopPullDownRefresh()
					} else {
						uni.showToast({
							title: "数据请求失败",
							icon: "none",
							duration: 2000
						})
					}
				})
			},

			onClickItem(e) {
				console.log(e)

				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.n = 1
					if (e.currentIndex == 0) {
						this.currentIndex = 0
						this.typesH = '全部'
						this.getData()
					} else if (e.currentIndex == 1) {
						this.currentIndex = 1
						this.typesH = '待付款'
						this.getData()
					} else if (e.currentIndex == 2) {
						this.currentIndex = 2
						this.typesH = '待发货'
						this.getData()
					} else if (e.currentIndex == 3) {
						this.currentIndex = 3
						this.typesH = '已发货'
						this.getData()
					} else {
						this.currentIndex = 4
						this.typesH = '已签收'
						this.getData()
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;
		min-height: 100vh;
		height: auto;
		background: #f3f5f7;

		.bigmore {
			line-height: 120rpx;
			background: #ffffff;
		}

		.f2 {
			width: 750rpx;
			margin-top: 32rpx;

			.list {
				.content {
					.lisitem {
						width: 86%;
						margin: 0 auto;
						background: #fff;
						height: 282rpx;
						padding: 28rpx;
						border-radius: 15rpx;
						margin-bottom: 25rpx;

						.states {
							float: right;
							color: red;
							font-size: 24rpx;
						}

						.time {
							color: #656768;
							font-size: 26rpx;
						}

						.center {
							display: flex;
							margin: 15rpx 0;

							.img {
								width: 22%;
								height: 150rpx;
								border-radius: 10rpx;
							}

							.title {
								line-height: 150rpx;
								width: 40%;
								margin-left: 20rpx;
								overflow: hidden; //超出的文本隐藏
								text-overflow: ellipsis; //溢出用省略号显示
								white-space: nowrap; // 默认不换行；
							}

							.price {
								margin-top: 42rpx;
								margin-left: 23%;
								font-size: 28rpx;
							}
						}

						.button {
							float: right;

							.pay {
								width: 160rpx;
								background-image: linear-gradient(to right, rgba(237, 127, 48, 1), rgba(255, 66, 23, 1));
								text-align: center;
								height: 66rpx;
								line-height: 66rpx;
								color: #ffffff;
								border-radius: 50rpx;
								font-weight: bold;
							}
						}
					}
				}

				.none {
					text-align: center;
					line-height: 630rpx;
					color: #cecece;
				}
			}
		}
	}
</style>
